<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="iceui/src/ui/ui.css"/>
    <script src="iceui/src/ice.js"></script>
    <script src="iceui/src/ui/ui.js"></script>
    <script src="iceui/src/popup/icePopup.js"></script>
    <link rel="stylesheet" type="text/css"
          href="css/LoginPage.css">
</head>
<body>
<div id='form'>
    <form action="http://localhost:8080/RainbowCloud_war_exploded/GoMainPageServlet" method="post">
        <table>
            <tr>
                <th colspan="2"><h1>登录</h1></th>
            </tr>
            <tr>
                <td><label for="userName"></label></td>
                <td>
                    <input type="text" name="userName" id="userName" class="admin-login-input name" placeholder="账号"
                           value="">
                </td>
            </tr>
            <tr>
                <td><label for="userPwd"></label></td>
                <td>
                    <input type="password" name="userPwd" id="userPwd" class="admin-login-input name" placeholder="密码"
                           value="">
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                        <input type="checkbox" id="d1-1" checked>
                        <label for="d1-1">记住密码</label>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="登录">
                </td>
            </tr>
        </table>
        <a href="#" class="a-line">创建账号</a>
    </form>
</div>
<script>
    // 获取第一个表单
    //document.forms[0] 或 document.forms["myform"]
    // 获取表单元素
    //document.forms[0].elements[0]
    // 或 document.forms["myform"].elements["userName"]
    // 或者简化 document.forms[0][0]

    function $(id) {
        return document.querySelector(id);
    }

    function uperror() {
        ice.alert('请正确输入账号或密码');
    }

    window.onload = function () {
        // 给文本框绑定事件
        // document.forms[0][0].onblur = checkUserName;
        // document.forms[0][1].onblur = checkPwd;

        // 给表单绑定提交事件：onsubmit (点提交按钮时触发)
        document.forms[0].onsubmit = checkForm;

    };


    // 校验用户名
    function checkUserName() {

        // 获取用户名的文本框对象(第一个表单的第一个元素)
        let userName = document.forms[0][0].value;
        // 定义正则表达式
        let reg = /^[a-zA-Z]\w{4,9}$/;

        // 用正则去验证用户名是否符合规则
        if (reg.test(userName)) {  // 测试通过，返回true
            return true;
        } else {
            ice.pop("用户名不能为空!");
            return false;
        }

    }

    // 校验密码
    function checkPwd() {
        let userPwd = document.forms[0][1].value;
        let reg = /^[a-zA-Z0-9]{6,16}$/;
        if (reg.test(userPwd)) {
            return true;  // 返回值
        } else {
            ice.pop("密码不能为空!");
            return false;
        }

    }

    // 校验整个表单
    function checkForm() {

        if (checkUserName() && checkPwd() /*&& checkEdu()*/) {
            //条件成立， 整个表单数据校验通过
            // 可以获取用户填写的数据，并且提交到服务器处理
            let userName = document.forms[0][0].value;
            let userPwd = document.forms[0][1].value;


            return true;

        } else {
            // 不通过呢: 阻止表单的提交
            return false;
        }
    }
</script>
</body>
</html>